<template>
  <van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
    <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
    <template #pulling="props">
      <img
        class="doge"
        src="https://img.yzcdn.cn/vant/doge.png"
        :style="{ transform: `scale(${props.distance / 80})` }"
      />
    </template>

    <!-- 释放提示 -->
    <template #loosing>
      <img class="doge" src="https://img.yzcdn.cn/vant/doge.png" />
    </template>

    <!-- 加载提示 -->
    <template #loading>
      <img class="doge" src="https://img.yzcdn.cn/vant/doge-fire.jpg" />
    </template>
    <PlayListbordered :imgs="imgs" :newSongs="newSongs"></PlayListbordered>
    <PlayListNewmusic
      @update:music="$emit('update:music', $event)"
      @update:playlist="$emit('update:playlist', $event)"
      :newSongs="newSongs"
      :currentMusic="$attrs.currentMusic"
      :paused="$attrs.paused"
      @too-more="getMore"
    ></PlayListNewmusic>
    <playListDiscuss></playListDiscuss>
  </van-pull-refresh>
</template>

<script>
import PlayListNewmusic from "@/components/PlayListNewmusic.vue";
import PlayListbordered from "@/components/PlayListbordered.vue";
import playListDiscuss from "@/components/playListDiscuss.vue";
import { Toast } from "vant";
export default {
  components: {
    PlayListNewmusic,
    PlayListbordered,
    playListDiscuss,
  },
  data: function () {
    return {
      recommends: [],
      newSongs: [],
      // RecommendIndex: 0,
      imgs: null,
      limit: 1,
      count: 0,
      isLoading: false,
    };
  },
  created() {
    this.getData();
    this.id = this.$route.query.id;
  },
   activated: function () {
    // console.log(this.$route.query.id);
    this.id = this.$route.query.id;
  },
  beforeRouteUpdate: function () {
    // console.log(this.$route.query.id);
    this.id = this.$route.query.id;
  },
  // console.log("Hot created");
  methods: {
    getData: function () {
      this.$root.isShowLoading = true;
      this.axios
        .get("/playlist/detail?id=" + this.$route.query.id)
        .then((response) => {
          console.log(response);
          this.imgs = response.data.playlist;
          this.recommends = response.data.playlist.trackIds
            .slice(20 * (this.limit - 1), 20 * this.limit)
            .map((e) => e.id)
            .join();
          this.$root.isShowLoading = true;
          this.axios
            .get(
              "/song/detail?ids=" + this.recommends
              // response.data.playlist.trackIds
              //   .slice(0, 20)
              //   .map((e) => e.id)
              //   .join()
            )
            .then((response) => {
              // console.log(response.data.songs);
              this.newSongs = response.data.songs;
            })
            .finally(() => {
              this.$root.isShowLoading = false;
            });
        })
        .finally(() => {
          this.$root.isShowLoading = false;
        });
    },
    getMore() {
      if (this.limit < 5) {
        this.limit++;
        this.getData();
      } else {
        this.limit = 1;
      }
    },
    onRefresh() {
      setTimeout(() => {
        if (this.limit < 5) {
          Toast("刷新成功");
          this.limit++;
          this.getData();
          this.isLoading = false;
          this.count++;
        } else {
          this.limit = 1;
        }
      }, 1000);
    },
  },
  watch: {
    $route: function () {
      this.getData();
    },
  },
};
// mounted() {
//   console.log("Hot mounted");
// },
</script>

<style scoped lang="less">
.doge {
  width: 140px;
  height: 72px;
  margin-top: 8px;
  border-radius: 4px;
  overflow-x: hidden;
}
</style>